<template>
  <div>
    <table class="table1">
  <tr>
    <th>时间</th>
    <th>周一</th>
    <th>周二</th>
    <th>周三</th>
    <th>周四</th>
    <th>周五</th>
  </tr>
  <tr v-for="(row, index) in tableData" :key="index">
    <td>{{ tableTime[index].start_time+' ~ '+tableTime[index].end_time }}</td>
    <td>
      <button
        :class="['button-style', { 'ed-button': row[0] === 0, 'blue-button': row[0] === 1,'.buqian-button': row[0] === 2 }]"
        :disabled="row[0] === -1"
        @click="qiandao(index, 0)"
      >
        {{ row[0]!== -1? row[0] : '' }}
      </button>
    </td>
    <td>
      <button
        :class="['button-style', { 'ed-button': row[1] === 0, 'blue-button': row[1] === 1 ,'buqian-button': row[1] === 2 }]"
        :disabled="row[1] === -1"
        @click="qiandao(index, 1)"
      >
        {{ row[1]!== -1? row[1] : '' }}
      </button>
    </td>
    <td>
      <button
        :class="['button-style', { 'ed-button': row[2] === 0, 'blue-button': row[2] === 1 ,'buqian-button': row[2] === 2 }]"
        :disabled="row[2] === -1"
        @click="qiandao(index, 2)"
      >
        {{ row[2]!== -1? row[2] : '' }}
      </button>
    </td>
    <td>
      <button
        :class="['button-style', { 'ed-button': row[3] === 0, 'blue-button': row[3] === 1,'buqian-button': row[3] === 2 }]"
        :disabled="row[3] === -1"
        @click="qiandao(index, 3)"
      >
        {{ row[3]!== -1? row[3] : '' }}
      </button>
    </td>
    <td>
      <button
        :class="['button-style', { 'ed-button': row[4] === 0, 'blue-button': row[4] === 1,'buqian-button': row[4] === 2 }]"
        :disabled="row[4] === -1"
        @click="qiandao(index, 4)"
      >
        {{ row[4]!== -1? row[4] : '' }}
      </button>
    </td>
  </tr>
</table>
<table class="table2">
  <tr>
    <th>姓名</th>
    <th>周数</th>
    <th>日</th>
    <th>节次</th>
    <th>迟到原因</th>
  </tr>
  <tr v-for="(row, index) in overTime" :key="index">
    <td>{{ row.name }}</td>
    <td>{{ row.week }}</td>
    <td>{{ row.dayOfWeek }}</td>
    <td>{{ row.period }}</td>
    <td>{{ row.violation_content }}</td>
  </tr>
</table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      studentId:localStorage.getItem('userid'),
      tableTime:[],
      overTime:[],
    };
  },
  created() {
    this.generateTableData();
    this.gettime();
    this.getovertime();
  },
  methods: {
    qiandao(row, column) {
      if(this.tableData[row][column]==1){
        alert('请勿重复签到')
        return
      }
  this.$axios.post('api/user/qiandao', {
    period: row + 1,
    weekday: column + 1,
    studentId: this.studentId
  }).then(response => {
    if(response.data.data){
      alert("签到成功")
    }else{
      alert("请在规定时间内操作")
    }
    this.generateTableData();
    // 处理响应
  }).catch(error => {
    // 处理错误
  });
},
gettime(){
    //查询时间
    this.$axios.get('api/admin/gettime').then
  (response => {
    this.tableTime = response.data.data.time;
  }).catch(error => {

  })
},
getovertime(){
      //查询迟到记录:
      this.$axios.get('api/user/overtime',{
        params: {
          studentId: this.studentId,
        }
      })
        .then(response => {
          console.log(response.data.data);
          this.overTime=response.data.data;
        })
        .catch(error => {
          // alert("账号错误请联系管理员")
        });
},
    generateTableData() {
      //获取学生课程信息
      this.$axios.get('api/user/cource',{
        params:{
          studentId: this.studentId,
        }
      })
        .then(response => {
            let cou = response.data.data;
             this.tableData = Array.from({length: 5}, () => Array(5).fill(-1)); 
     // 遍历每个周期
for (let i = 0; i < 5; i++) {
  // 过滤出当前周期的课程
  let peridcource = cou.filter(item => item.period === i + 1);

  // 遍历每个星期几
  for (let j = 0; j < 5; j++) {
    // 过滤出当前周期且当前星期几的课程
    let coursename = peridcource.find(item => item.dayOfWeek === j + 1);

    // 如果找到了课程，将其名称（或您想要的其他信息）放入二维数组中
    if (coursename) {
      this.tableData[i][j] = coursename.isOver; // 假设每个课程对象都有一个'name'属性
    }
  }

}
// console.log(this.tableData);
           }).catch(error => {
             alert("账号错误请联系管理员")
             this.$router.push({'path':'/login'})
           });
    },
  },
};
</script>
<style scoped>
.table1 {
      width: 70%;
      border-collapse: collapse;
      float: left;
    }
.table2 {
  width: 30%;
      border-collapse: collapse;
}
    th,
    td {
      border: 1px solid black;
      padding: 15px;
      text-align: left;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }
    button {
  padding: 10px 20px;  /* 增加内边距，使按钮更饱满 */
  font-size: 16px;  /* 增大字体大小 */
  border-radius: 5px;  /* 使按钮边缘有圆角 */
  border: 2px solid #000;  /* 较粗的边框 */
  transition: background-color 0.3s ease, color 0.3s ease;  /* 平滑的颜色过渡效果 */
  cursor: pointer;  /* 鼠标指针变为手型 */
}

.button-style {
  background-color: red;
  color: #fff;  /* 白色文字 */
}
.blue-button {

  background-color: #4CAF50;  /* 绿色背景 */
  color: #fff;  /* 白色文字 */
}
.buqian-button{
  background-color: #240c79;  
  color: #fff;  /* 白色文字 */
}
button:disabled {
  opacity: 0.6;  /* 降低透明度表示禁用状态 */
  cursor: not-allowed;  /* 鼠标指针变为禁止符号 */
  background-color: #ccc;  /* 禁用时的背景颜色 */
  color: #666;  /* 禁用时的文字颜色 */
  border-color: #999;  /* 禁用时的边框颜色 */
}

button:hover {  /* 鼠标悬停时的效果 */
  background-color: #388e3c;
  color: #fff;
}

button:active {  /* 鼠标按下时的效果 */
  background-color: #2e7d32;
  color: #fff;
}
</style>